<template>
    <div class="content">
        <div class="el-card__body">
            <el-form :model="form" ref="formRef" :rules="rules">
                <el-form-item  prop="name" label="属性名称:">
                    <el-input v-model="form.name" size="large" />
                </el-form-item>
                <el-form-item label="商品类型:">
                    <el-select v-model="optionList" @change="changeSelectVal">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类筛选样式:">
                    <el-radio-group v-model="filterTypeRadio" @change="filterTypeGroup(Number(filterTypeRadio))">
                        <el-radio :label="0">普通</el-radio>
                        <el-radio :label="1">颜色</el-radio>
                    </el-radio-group>
                </el-form-item>
                 <el-form-item label="能否进行检索:">
                    <el-radio-group v-model="searchTypeRadio" @change="searchTypeGroup(Number(searchTypeRadio))">
                        <el-radio :label="0">不需要检索</el-radio>
                        <el-radio :label="1">关键子检索</el-radio>
                        <el-radio :label="2">范围检索</el-radio>
                    </el-radio-group>
                </el-form-item> 
                <el-form-item label="商品属性关联:">
                    <el-radio-group v-model="relatedStatusRadio" @change="relatedStatusGroup(Number(relatedStatusRadio))">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item> 
                <el-form-item label="属性是否可选:">
                    <el-radio-group v-model="selectTypeRadio" @change="selectTypeGroup(Number(selectTypeRadio))">
                        <el-radio :label="0">唯一</el-radio>
                        <el-radio :label="1">单选</el-radio>
                        <el-radio :label="2">复选</el-radio>
                    </el-radio-group>
                </el-form-item> 
                <el-form-item label="属性值的录入方式:">
                    <el-radio-group v-model="inputTypeRadio" @change="inputTypeGroup(Number(inputTypeRadio))">
                        <el-radio :label="0">手工录入</el-radio>
                        <el-radio :label="1">从下面列表中选择</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="属性值可选值列表:">
                    <el-input type="textarea" v-model="form.inputList" />
                </el-form-item>

                <el-form-item label="是否支持手动新增:">
                    <el-radio-group v-model="handAddStatusRadio" @change="handAddStatusGroup(Number(handAddStatusRadio))">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序属性:">
                    <el-input size="large" v-model="form.sort" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup lang='ts'>
import {addProductAttrApi ,productAttributeAttrIdApi,editProductAttributeApi} from "./api";
import { ElMessage,ElMessageBox,FormInstance} from 'element-plus';
import { reactive, ref } from "vue";
import { useRoute,useRouter } from "vue-router";
import console from "console";
const router = useRouter();
const route = useRoute()
const cid = route.query.cid
const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 100,
})
// form数据
const formRef = ref<FormInstance>()
// 获取编辑id的数据

const form = reactive<IProductAttributeList>({
    id:0,
    filterType: 0,
    handAddStatus: 0,
    inputList: "",
    inputType: 0,
    name: "",
    productAttributeCategoryId: 0,
    relatedStatus: 0,
    searchType: 0,
    selectType: 0,
    sort: 0,
    type: 0
})
// 分类筛选样式
const filterTypeRadio = ref(0);
form.filterType = Number(filterTypeRadio.value);
const filterTypeGroup = (filterTypeRadio: number) => {
    form.filterType = filterTypeRadio;
};
// 能否进行检索
const searchTypeRadio = ref(0);
form.searchType = Number(searchTypeRadio.value);
const searchTypeGroup = (searchTypeRadio: number) => {
    form.searchType = searchTypeRadio;
};
// 商品属性关联
const relatedStatusRadio = ref(0);
form.relatedStatus = Number(relatedStatusRadio.value);
const relatedStatusGroup = (relatedStatusRadio: number) => {
    form.relatedStatus = relatedStatusRadio;
};
// 属性是否可选
const selectTypeRadio = ref(0);
form.selectType = Number(selectTypeRadio.value);
const selectTypeGroup = (selectTypeRadio: number) => {
    form.selectType = selectTypeRadio;
};
// 属性值的录入方式
const inputTypeRadio = ref(0);
form.inputType = Number(inputTypeRadio.value);
const inputTypeGroup = (inputTypeRadio: number) => {
    form.inputType = inputTypeRadio;
};
// 是否支持手动新增
const handAddStatusRadio = ref(0);
form.handAddStatus = Number(handAddStatusRadio.value);
const handAddStatusGroup = (handAddStatusRadio: number) => {
    form.handAddStatus = handAddStatusRadio;
};
const optionList =ref(form.productAttributeCategoryId)
// 筛选数据
const options = ref<{
    label: string; value: number,
}[]>()
//获取所有商品类型
addProductAttrApi(queryParams).then((res) => {
    options.value = res.data.list.map(item => ({
        label: item.name,
        value: item.id,
    }))
})
// 规则
const rules = reactive({
    name: [{ required: true, trigger: "blur", message: "请填写分类名称" }],

})
// 获取商品类型
const changeSelectVal = () => { 
 form.productAttributeCategoryId=optionList.value
}
if (route.query.id) {
    productAttributeAttrIdApi (parseInt(route.query.id as string)).then((res) => {
        Object.assign(form, res.data);
    })
}

// 提交
const onSubmit = () => {
    ElMessageBox.confirm('确定要修改数据吗', '修改属性', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        editProductAttributeApi(parseInt(route.query.id as string),form).then((res) => {
         if(res.code===200){
            ElMessage.success("修改成功")
            // router.push(`/pms/productAttrList?cid=${form.productAttributeCategoryId}&cname=${form.name}&type=${form.type}`) 
             router.push('/pms/productAttr')

         }
        })
    }).catch(() => {
        ElMessage.error('提交失败,请重新提交')
    })
}
</script>

<style lang="less" scoped>
.content {
    width: 800px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;

    .el-card__body {
        width: 760px;
        padding: 20px;
    }
}
</style>